<template>
  <div class="homeTopRight">
    <!-- 最新安装 -->
    <div class="homeTopRight-top">
      <div class="class-title-icon">
        <div class="title">最新安装</div>
      </div>
      <!--最新安装 表格内容 -->
      <div class="homeTable">
        <el-table :data="tableData3" height="226" :header-cell-style="{background: '#141F3B',color:'#23cefd',fontSize:'16px',fontWeight: '400'}">
          <el-table-column prop="insTime" label="安装时间" width="100" align="center"></el-table-column>
          <el-table-column prop="imei" label="IMEI" width="140" align="center"></el-table-column>
          <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip align="center"> </el-table-column>
          <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip align="center"> </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 累计 -->
    <div class="homeTopRight-bottom">
      <div class="class-title-icon">
        <div class="title">累计</div>
      </div>
      <div style="width: 100%; margin: auto; position: relative">
        <pie-chart :data="set_pieData" />
        <div class="charts-round"></div>

      </div>
    </div>
  </div>
</template>

<script>
import pieChart from './pieChart'
  export default {
    components: { pieChart},
    props:['historyData3', 'pieData'],
    data(){
      return {
        set_pieData: null,
        tableData3:[]
      }
    },
    watch:{
      historyData3:function(data3){
        this.tableData3 = data3;
      },
      pieData:function(val){
        this.set_pieData = val;
      }
    }
  }
</script>

<style scoped>
  @import url('../../assets/css/homeTable.css');
</style>

<style scoped>
  /deep/.homeTopRight{
    width: 100%;
    height: 100%;
  }
  /deep/.homeTopRight-top{
    width: 100%;
    height: 296px;
    background: url("../../assets/img/home-right-01.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
  }
  /deep/.homeTopRight-bottom{
    width: 100%;
    height: 286px;
    background: url("../../assets/img/home-right-02.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  /deep/.charts-round{
    height: 209px;
    width: 209px;
    background: url("../../assets/img/round.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>
